<template>
	<view class="BOX">
		<view class="order-top">
			<view class="order-top-location" v-if="order_info.status !== 5">
				<view class="img">
					<image :src="address.store_photos" mode=""></image>
				</view>
				<view style="width: 590rpx;">
					<text style="font-size: 32rpx;"> {{address.hotel_name}} </text>
					<view class="ellipsis1" style="font-size: 26rpx;margin-top: 10rpx;">{{address.detail_address}}</view>
				</view>
			</view>
			<!-- <view class="order-top-text" v-if="order_info.status !== 5">
				<text style="margin-right: 20rpx;">开始日期 ：{{order_info.service_time}}</text>
				<text>上班时间 ：{{order_info.work_time}}</text>
			</view> -->
			<view class="order-top-text" v-if="order_info.status === 5">
				<view class="quxiao">
					<text>已取消</text>
				</view>
				<text style="margin-right: 20rpx;">{{order_info.cancel_reason || ''}}</text>
			</view>
			<!-- 			<view class="order-info">
				<view class="location-icon">
					<view>
						<uni-icons color="#50e28c" custom-prefix="iconfont" type="icon-weizhi" size="44r"></uni-icons>
					</view>
				</view>
				<view class="order-info-relation">
					<view class="order-info-relation-top">
						<text class="order-info-color">联系人：</text>
						<text> {{address.a_name}} {{address.tel}}</text>
						<view class="icons">
							<uni-icons color="#2DE2A9" type="forward" size="12" @click="clickIcon()"></uni-icons>
						</view>
					</view>
					<view class="order-info-relation-bottom">
						<text class="order-info-color">地址：</text>
						<text>{{address.road}} </text>
					</view>
				</view>
			</view> -->
			<view class="order-info">

				<view class="order-info-relation">
					<view class="order-info-relation-top">
						<text class="order-info-color">联系方式：</text>
						<!-- <text> {{address.a_name}}</text> -->
						<text>
							{{address.tel}}
						</text>
					</view>
					<view class="order-info-relation-bottom">
						<text >起止日期：</text>
						<text class="order-info-color">{{info.service_start_time}}至{{info.service_end_time}}</text>
						<view style="float: right;">共<text style="font-size: 32rpx;color: #FF4B4B;">{{ info.service_day}}</text> 天</view>
					</view>
				</view>
				<!-- 				<view class="order-info-relation2" v-show="order_info.is_signup === 1">
					<view class="order-info-phone" @click="openTel()">
						<text>拨打</text>
						<uni-icons type="phone-filled" color="#33D182" size="16"></uni-icons>
					</view>
					<view class="order-info-map">
						<text>地图 导航</text>
					</view>
				</view> -->
			</view>
		</view>
		<view class="order-information">
			<uni-card :is-shadow="false" :border="false" :padding="0" :margin="0">
				<view class="order-information-room">
					<view class="order-information-room-info">
						<view class="order-information-room-info-son" v-if="order_info.order_class == 1">
							<view class="order-information-room-info-son-t">
								<text style="color:#47DD89">{{order_info.room_number|| '0'}}</text><text style="color:#000">间</text><text
									class="order-information-room-info-son-b2">/1人</text>
							</view>
							<view class="order-information-room-info-son-b">
								<uni-icons color="#47DD89" custom-prefix="iconfont" type="icon-shuxian" size="22r">
								</uni-icons>
								<text>保底房量</text>
							</view>
						</view>
						<view class="order-information-room-info-son" v-if="order_info.order_class == 1">
							<view class="order-information-room-info-son-t">
								<text>{{order_info.unit_price || '0'}}</text><text class="order-information-room-info-son-b2">/1间</text>
							</view>
							<view class="order-information-room-info-son-b">
								<uni-icons color="#FF4B4B" custom-prefix="iconfont" type="icon-shuxian" size="22r">
								</uni-icons>
								<text>做房单价</text>
							</view>
						</view>
						<view class="order-information-room-info-son" v-if="order_info.order_class >= 2">
							<view class="order-information-room-info-son-t">
								<text style="color:#FF4B4B">{{order_info.unit_price|| '0'}}</text>
								<text class="order-information-room-info-son-b2">
									/{{order_info.hourly_wage_type == 1 ? '小时' :"天"}}
		
								</text>
							</view>
							<view class="order-information-room-info-son-b">
								<uni-icons color="#47DD89" custom-prefix="iconfont" type="icon-shuxian" size="22r">
								</uni-icons>
								<text>工作时薪</text>
							</view>
						</view>
						<view class="order-information-room-info-son">
							<view class="order-information-room-info-son-t">
								<text style="color:#FF4B4B">{{earning|| '0'}}</text>
								<text class="order-information-room-info-son-b2">/元
								</text>
							</view>
							<view class="order-information-room-info-son-b">
								<uni-icons color="#47DD89" custom-prefix="iconfont" type="icon-shuxian" size="22r">
								</uni-icons>
								<text>预计支出</text>
							</view>
						</view>
					</view>
				</view>

				<view class="fengexian"></view>
				<view class="order-xuqiu" v-if="order_info.order_type === 3">
					<uni-row class="demo-uni-row">
						<uni-col :span="14">
							<view class="demo-uni-col ">
								<text >已报名：</text>
								<text  class="demo-uni-col2" v-if="order_info.gender_require_type == 1">{{order_info.man_signup_people_number}}/{{order_info.people_number_arr[0]}}男,{{order_info.woman_signup_people_number}}/{{order_info.people_number_arr[1]}}女</text>
								<text  class="demo-uni-col2" v-else>{{order_info.signup_people_number}}人</text>
								<text @click="clickChakan()" class="chakan"
									v-show="order_info.signup_people_number !== 0">查看</text>
							</view>
						</uni-col>
						<uni-col :span="10">
							<view class="demo-uni-col ">
								<text>需求人数：</text>
								<text  class="demo-uni-col2">{{order_info.people_number}}人</text>
							</view>
						</uni-col>
						
				<!-- 		<uni-col :span="14">
							<view class="demo-uni-col ">
								<text class="demo-uni-col2">性别/年龄：</text>
								<text
									>{{genderStatus[order_info.gender_require]}}/{{order_info.age_require}}岁</text>
							</view>
						</uni-col>
						<uni-col :span="10">
							<view class="demo-uni-col ">
								<text  class="demo-uni-col2">等级要求：</text>
								<text>{{order_info.level_require}}</text>
							</view>
						</uni-col> -->
						<uni-col :span="14" v-if="order_info.order_class >= 2">
							<view class="demo-uni-col ">
								<text>上班时间：</text>
								<text   class="demo-uni-col2">{{order_info.duty_time}} </text>
							</view>
						</uni-col>
						<uni-col :span="10" v-if="order_info.order_class >= 2 && order_info.duty_time_type == 2">
							<view class="demo-uni-col ">
								<text>预计时长：</text>
								<text  class="demo-uni-col2">{{order_info.time_num}} </text>
							</view>
						</uni-col>
						<uni-col :span="10"  v-if="order_info.order_class >= 2">
							<view class="demo-uni-col ">
								<text>到岗时间：</text>
								<text  class="demo-uni-col2">{{order_info.work_time}}</text>
							</view>
						</uni-col>
						
						<uni-col :span="14"  v-if="order_info.order_class == 1">
							<view class="demo-uni-col ">
								<text>到岗时间：</text>
								<text  class="demo-uni-col2">{{order_info.work_time}}</text>
							</view>
						</uni-col>

						<uni-col :span="14" v-if="order_info.order_class >= 2">
							<view class="demo-uni-col ">
								<text>需求职位：</text>
								<text class="demo-uni-col2" >{{order_info.position_text}}</text>
							</view>
						</uni-col>
						
						<uni-col :span="10" v-if="order_info.order_class >= 2">
							<view class="demo-uni-col ">
								<text>年龄：</text>
								<text class="demo-uni-col2">{{order_info.age_require}}岁</text>
							</view>
						</uni-col>
						<uni-col :span="14">
							<view class="demo-uni-col ">
								<text>工作餐：</text>
								<text  class="demo-uni-col2">{{order_info.meal_allowance==0?'包餐':order_info.meal_allowance_price+'元/天'}}</text>
							</view>
						</uni-col>
						<uni-col :span="10">
							<view class="demo-uni-col ">
								<text>住宿：</text>
								<text  class="demo-uni-col2">{{order_info.stay==1?'包住':'无住宿'}}</text>
							</view>
						</uni-col>
						<uni-col :span="14" v-if="order_info.order_class >= 2">
							<view class="demo-uni-col ">
								<text>交通：</text>
								<text  class="demo-uni-col2">{{order_info.traffic_type == 1?'自行到岗': order_info.traffic_price+'元/天'}}</text>
							</view>
						</uni-col>
						<uni-col :span="14" v-if="order_info.order_class == 1">
							<view class="demo-uni-col ">
								<text>结算方式：</text>
								<text  class="demo-uni-col2">{{order_info.jiesuan}}</text>
							</view>
						</uni-col>
						<uni-col :span="10" v-if="order_info.order_class >= 2">
							<view class="demo-uni-col ">
								<text>结算方式：</text>
								<text  class="demo-uni-col2">{{order_info.jiesuan}}</text>
							</view>
						</uni-col>
						<uni-col :span="10" v-if="order_info.is_festival > 0 && order_info.order_class == 1" >
							<view class="demo-uni-col ">
								<text  class="demo-uni-col2" style="color:#FF4B4B">提示信息：</text>
								<text style="color:#FF4B4B;font-size: 32rpx;">节假日订单</text>
							</view>
						</uni-col>
						<uni-col :span="14" v-if="order_info.is_festival > 0 && order_info.order_class >= 2">
							<view class="demo-uni-col ">
								<text  class="demo-uni-col2" style="color:#FF4B4B">提示信息：</text>
								<text style="color:#FF4B4B;font-size: 32rpx;">节假日订单</text>
							</view>
						</uni-col>
					</uni-row>
				</view>
			</uni-card>
		</view>
<!-- 		<view class="order-welfare">
			<uni-card title="福利补贴" :is-shadow="false" :border="false" :padding="0" :margin="0">
				<view class="order-welfare-top" style="margin-bottom: 20rpx;">
					<text class="lv">补贴金额：</text>
					<text>{{order_info.subsidy}}元</text>
				</view>
				<view class="order-welfare-bottom" style="margin-bottom: 20rpx;" v-if="order_info.order_type === 3">
					<text class="lv">福利：</text>
					<text>{{mealAllowanceFilter[order_info.meal_allowance]}}、{{fatigueDressFilter[order_info.fatigue_dress]}}、{{stayFilter[order_info.stay]}}
					</text>
				</view>
			</uni-card>
		</view> -->

		<view class="order-welfare"
			v-if="order_info.order_type !== 3 && order_info.status !==1 && order_info.status !==5 || order_info.status === 2">
			<uni-card title="服务详情" :is-shadow="false" :border="false" :padding="0" :margin="0">
				<view class="order-welfare-fuwu" v-for="(item, index) in service_details_data" :key="index">
					<view>
						<text class="lv lv2">{{item.cleaner_name}}:</text>
						<text style="margin-right: 15rpx;" v-if="order_info.order_class == 1">￥{{item.price}} X {{item.room_num}}间</text>
						<text style="margin-right: 15rpx;" v-if="order_info.order_class >= 2">￥{{item.price}} X {{item.time}}{{order_info.hourly_wage_type ==1 ? '小时':'天'}}</text>
					</view>
					<text style="font-size: 32rpx;">￥{{item.money}}</text>
				</view>
				<view class="order-welfare-fuwu">
					<text class="lv lv2 lv3">服务时间</text>
					<text>{{order_info.service_start_time}}-{{order_info.service_end_time}}</text>
				</view>
				<view class="order-welfare-fuwu">
					<text class="lv lv2 lv3">备注</text>
					<text>{{order_info.remarks || ''}}</text>
				</view>
				<view class="order-welfare-fuwu">
					<text class="lv lv2 lv3">补贴总额</text>
					<text style="color: #FF4B4B; font-size: 32rpx;">￥{{order_info.subsidy}}</text>
				</view>
				<view class="order-welfare-fuwu">
					<text class="lv lv2 lv3">订单总额</text>
					<text style="color: #FF4B4B;  font-size: 32rpx;">￥{{order_total_money}}</text>
				</view>
			</uni-card>
		</view>
		<!-- <view class="order-welfare">
			<uni-card title="订单信息" :is-shadow="false" :border="false" :padding="0" :margin="0">
				<view class="order-welfare-son">
					<text class="lv lv2">订单编号</text>
					<text>{{order_info.order_num}}</text>
				</view>
				<view class="order-welfare-son">
					<text class="lv lv2">下单时间</text>
					<text>{{order_info.create_time}}</text>
				</view>
				<view class="order-welfare-son"
					v-if="order_info.hotel_confirm_time !== '--' && (order_info.status ===2 ||order_info.status ===3||order_info.status ===4)">
					<text class="lv lv2" v-if="order_info.hotel_confirm_time">确认时间</text>
					<text>{{order_info.hotel_confirm_time}}</text>
				</view>
				<view class="order-welfare-son"
					v-if="order_info.hotel_pay_time !== '--' && (order_info.status ===3||order_info.status ===4)">
					<text class="lv lv2">支付时间</text>
					<text>{{order_info.hotel_pay_time}}</text>
				</view>
				<view class="order-welfare-son" v-if="order_info.hotel_evaluate_time!== '--' && order_info.status ===4">
					<text class="lv lv2">评价时间</text>
					<text>{{order_info.hotel_evaluate_time}}</text>
				</view>
				<view class="order-welfare-son" v-if="order_info.hotel_cancel_time !== '--' && order_info.status ===5">
					<text class="lv lv2" v-if="order_info.hotel_pay_time">取消时间</text>
					<text>{{order_info.hotel_cancel_time}}</text>
				</view>
			</uni-card>
		</view> -->

	<!-- 	<view class="order-welfare" v-if="order_info.order_class === 1">
			<uni-card title="清洁要求" :is-shadow="false" :border="false" :padding="0" :margin="0">
				<view class="order-welfare-top" style="margin-bottom: 20rpx;">
					<text>	{{cleaner_rule}}</text>	
				</view>
				<view>	{{clean_requirements[0] || ''}}</view>
			</uni-card>
		</view> -->

		<view class="order-big-img">
			<uni-card title="备注信息" :is-shadow="false" :border="false" :padding="0" :margin="0">
				<view class="order-welfare-top" style="margin-bottom: 20rpx;text-align: left;">
					<text>	{{order_info.remarks}}</text>	
				</view>
				<view class="" v-if="cleanliness_standard.length  > 0">
					<swiper   class="swiper" circular :indicator-dots="indicator-dots" autoplay :interval="2000" :duration="500">
						<swiper-item v-for="(index,item) in cleanliness_standard" :key="index">
							<image :src="index" mode="aspectFit" @click="lookImg(index)" ></image>
						</swiper-item>
					</swiper>
				</view>
			
		
			</uni-card>
		
		</view>

		<!-- 修改订单弹框 -->
		<uni-popup class="updataOrderPopup" ref="updataOrderPopup" type="bottom" background-color="#fff">
			<view class="Popup">
				<uni-card title="修改订单" :is-shadow="false" :border="false" :padding="0" :margin="0">
					<view class="updataOrderPopup">
						<view class="from-item">
							<view class="from-title">需求人数</view>
							<view class="from-small isflex">
								<view class="from-small-left" v-if="order_info.order_class>=2">
									区分性别
									<switch color="#26c87d" @change="changeSex" :checked="gender_require==1" style="transform:scale(0.7)"/>
								</view>
								<view style="flex: 1;" v-if="order_info.order_class>=2">
									<input type="number" v-if="gender_require==0" v-model="people_number" placeholder="请输入人数">
									<view class="isflex" v-else>
										<input type="number" v-model="man_number" placeholder="人数"> 男
										<input type="number" v-model="woman_number" placeholder="人数"> 女
									</view>
								</view>
								<view style="flex: 1;" v-else>
									<input type="number" v-model="people_number" placeholder="请输入人数">
								</view>
							</view>
						</view>
						<view class="from-item" v-if="order_info.order_class==1">
							<view class="from-title">预计房量</view>
							<view class="from-small isflex">
								<view class="from-small-left">保底{{address.floor_room}}间</view>
								<input style="flex: 1;" type="number" v-model="expect_room_number" @blur="yuji" placeholder="请输入预计房量">
							</view>
						</view>
						<view class="from-item" v-if="order_info.order_class==1">
							<view class="from-title">做房单价</view>
							<view class="from-small isflex">
								<view class="from-small-left">不能低于{{address.unit_price}}元</view>
								<input style="flex: 1;" type="number" v-model="unit_price" @blur="zuofang" placeholder="请输入做房单价">
							</view>
						</view>
						<view class="from-item" v-if="order_info.order_class>=2">
							<view class="from-title">招聘年龄</view>
							<view class="from-small">
								<picker mode="multiSelector" :value="age_require" :range="ageArray" @columnchange="changeByone" @change="bindAgeChange">
									<view class="uni-input" v-if="age_require">{{age_require}}</view>
									<view class="uni-input" v-else>请选择</view>
								</picker>
							</view>
						</view>
						<view class="from-item" v-if="order_info.order_class>=2">
							<view class="from-title">工作时薪</view>
							<view class="from-small isflex">
								<view class="from-small-left isflex">
									<view v-for="(item,index) in wageList" :key="index" class="wage-item" 
										:class="hourly_wage_type==index+1?'active':''" @tap="cutWage(index)">
										{{item}}
									</view>
								</view>
								<view class="" style="flex: 1;">
									<uni-number-box v-model="unit_price" style="float: right;" :min="hourly_wage_type==1?address.time_unit_price:address.day_unit_price" :max="9999" :value="unit_price" />
								</view>
							</view>
						</view>
						<!-- <uni-forms ref="valiForm" :recruits="rules" :modelValue="valiFormData">
							<uni-forms-item label="需求人数" name="people_number">
								<uni-easyinput :clearable="false" :inputBorder="false"
									v-model="valiFormData.people_number" placeholder="请输入人数" />
							</uni-forms-item>
							<uni-forms-item label="预计房量" name="expect_room_number">
								<uni-easyinput :clearable="false" :inputBorder="false"
									v-model="valiFormData.expect_room_number" placeholder="请输入房量(间/人)" />
							</uni-forms-item>
							<uni-forms-item label="单价" name="unit_price">
								<uni-easyinput :clearable="false" :inputBorder="false"
									v-model="valiFormData.unit_price" placeholder="请输入单价" />
							</uni-forms-item>
						</uni-forms> -->
						<view class="order-btn order-btn2">
							<button class="order-btn " type="default" @click="save('valiForm')">确认修改</button>
						</view>
					</view>
				</uni-card>
			</view>
		</uni-popup>
		<!-- 修改订单弹框 -->

		<view class="order-btn order-btn-fixed" v-if="order_info.status === 1 && order_info.order_type === 3">
			<button class="button1" @click="updataOrder">修改订单</button>
			<button @click="startOrder"> {{order_info.is_start == 0  ? '开启报名' : '暂停报名'}}</button>
		</view>
		<view class="order-btn order-btn-fixed" v-if="order_info.status === 2">
			<view class="daijiesuanPrice">
				<text class="daijiesuanPrice-total">合计：</text>
				<text class="daijiesuanPrice-price">￥{{order_total_money}}元</text>
			</view>
			<view class="">
				<button @click="confirmPay()"> 立即支付</button>
			</view>
		</view>
		<!-- 查看人数弹框 -->
		<view class="examinePeoplePopup">
			<uni-popup ref="examinePeoplePopup" type="center" :animation="false">

				<uni-card title="报名人数" :is-shadow="false" :border="false" :padding="0" :margin="0">
					<view style="padding: 0 10rpx;" class="ex-popup">
						<view class="examinePeoplePopup-row" v-for="(item,index) in examinePeopleList" :key="index">
							<view class="examinePeoplePopup-row-img">
								<image :src="item.avatar[0]" mode=""></image>
							</view>
							<view style="width: 100%;">
								<view class="examinePeoplePopup-row1">
									<view>
										<text
											class="examinePeoplePopup-row1-name">{{item.real_name}}({{item.age}}岁·{{genderStatus[item.gender]}})</text>
									</view>
									<view>
										<!-- <uni-icons custom-prefix="iconfont" type="icon-weizhi" size="36r"
											color="#d8eefc">
										</uni-icons>
										<text class="examinePeoplePopup-row1-juli">{{item.distance}}</text> -->
										已服务{{item.services_num}}
									</view>
								</view>
								<view class="examinePeoplePopup-row2">
									<!-- 									<view class="examinePeoplePopup-row2-img dis-corder">
										<image :src="imgUrl1" mode="aspectFit" />
										<text>{{item.score}}</text>
									</view> -->
									<view class="examinePeoplePopup-row2-img dis-corder" @click="openTel(item.phone)">
										<uni-icons type="phone-filled" color="#33D182" size="16" style="margin-right: 15rpx;"></uni-icons>
										<text>{{item.phone}}</text>
									</view>
									<!-- 									<view class="examinePeoplePopup-row2-fuwu">
										<text>已服务 {{item.services_num}}</text>
									</view> -->
								</view>
								<view class="examinePeoplePopup-row3">
									<view class="">
										<view class="dis-corder dis-corder">
											<image @click="pingjiaClick(item)" class="img-14" :src="pinglun"
												mode="aspectFit" />
											<text>{{item.evaluate_num}}</text>
											<image @click="shouchangClick(item)" style="margin-left: 35rpx;"
												:src="item.collection?shouchangXz:shouchang" mode="aspectFit" />
											<text>{{item.collection_num || '0'}}</text>
										</view>
									</view>
									<view class="" v-if="order_info.status === 1">
										<button class="popupBtn" @click="cancelOrderCleaner(item)">取消</button>
									</view>
								</view>

							</view>

						</view>
					</view>

				</uni-card>
			</uni-popup>
		</view>
		<!-- 查看人数弹框
		<!-- 评论弹框 -->
		<uni-popup type="bottom" ref="evaluatePopup">
			<view class="popup">
				<view class="info-card">
					<uni-card :is-shadow="false" :border="false" :margin="'20rpx'" :spacing="'20rpx'" :padding="0">
						<view class="card-list">
							<view class="c-l-top">
								<image class="c-l-t-img" :src="detailsData.avatar[0]" mode=""></image>
								<view class="c-l-t-con">
									<view class="c-l-t-title">
										<view class="">
											<text style="margin-right: 50rpx;"
												class="c-l-t-name">{{detailsData.real_name || ''}}({{detailsData.age}}岁)</text>
										</view>
										<!-- <view class="c-l-t-info">
											<image class="c-l-t-ioc" :src="imgUrl1" mode=""></image>
											<text class="c-l-t-text">{{detailsData.score || ''}}</text>
										</view> -->
									</view>
									<view style="margin-top: 20rpx;">
										<uni-icons type="phone-filled" color="#33D182" size="16"></uni-icons>
										<text class="c-l-t-name"
											style="margin-left:5rpx;">{{detailsData.phone}}</text>
									</view>
									<text class="c-l-e-text">{{detailsData.cleaner_des || ''}}</text>
								</view>
							</view>
							<view class="c-l-end">
								<view class="c-l-e-kp">
									<image class="img-14" :src="imgUrl4" mode="aspectFit"></image>
									<text class="c-l-e-text">实名认证</text>
								</view>
								<view class="c-l-e-kp">
									<image class="img-14" :src="imgUrl3" mode="aspectFit"></image>
									<text class="c-l-e-text">已培训</text>
								</view>
								<view class="c-l-e-kp">
									<image class="img-14" :src="imgUrl2" mode="aspectFit"></image>
									<text class="c-l-e-text">已考试</text>
								</view>
								<!-- <view class="c-l-e-kp">
									<image class="img-14" src="../../../static/imgas/xing.png" mode="aspectFit"></image>
									<text class="c-l-e-text">{{detailsData.cleaner_level}}</text>
								</view> -->
							</view>
						</view>
					</uni-card>
				</view>
				<view class="list-card">
					<template v-if="commentsData.length != 0">
						<uni-card :is-shadow="false" :border="false" :margin="'20rpx'" :spacing="'0 20rpx'"
							:padding="0">
							<uni-list :border="false">
								<uni-list-item :border="false" :key="index" v-for="(i,index) in commentsData">
									<view slot="body" class="l-c">
										<view class="l-c-top">
											<view class="l-c-img">
												<image class="l-c-img" :src="i.logo[0]" mode=""></image>
											</view>
											<view class="l-c-title">
												<view class="l-c-name">
													<view class="l-c-text">{{i.hotel_name || ''}}</view>
													<view class="l-c-date">{{i.create_time || ''}}</view>
												</view>
												<view class="l-c-iocn">
													<image class="l-c-i-img" :src="imgUrl1" mode="aspectFit"
														:key="indexa" v-for="(j,indexa) in i.star"></image>
												</view>
											</view>
										</view>
										<view class="l-c-con">
											<text class="l-c-c-text">{{i.content || ''}}</text>
										</view>
										<view class="l-c-end">
											<uni-tag :circle="true" :text="s" :key="indexs"
												v-for="(s,indexs) in i.label"></uni-tag>
										</view>
									</view>
								</uni-list-item>
							</uni-list>
							<uni-load-more iconType="auto" :status="status1" @clickLoadMore="clickLoadMore1"
								:content-text="contentText" />
						</uni-card>
					</template>
					<view style="width: 100%;display: flex;flex-direction: column;align-items: center;" v-else>
						<image :src="imgUrl" style="width: 360rpx;margin: 100rpx 0; height: 330rpx;"></image>
						<text style="font-size: 32rpx;font-weight: 500;color: #777777;">暂无数据!</text>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 评论弹框 -->
		<!-- 取消保洁 -->
		<view>
			<uni-popup ref="inputDialog" type="dialog">
				<uni-popup-dialog ref="inputClose" mode="input" title="取消保洁" placeholder="请说明取消原因"
					@confirm="dialogInputConfirm"></uni-popup-dialog>
			</uni-popup>
		</view>
		<!-- 支付订单弹框 -->
		<view>
		  <uni-popup ref="mothodDialog"  type="bottom" background-color="#fff">
				<radio-group  class="pay-box" v-model="payType" active-color="#f0c785">
					<view class="u-flex u-row-between pay-item" 
						@tap="payType = 'wechat'">
						<view class="u-flex">
							<image class="pay-img" src="../../../static/imgas/order_wx_pay.png" mode=""></image>
							<text>微信支付</text>
						</view>
					
						<radio shape="circle" name="wechat"></radio>
					</view>
					<!-- 余额支付 -->
					<view class="u-flex u-row-between pay-item" @tap="payType = 'wallet'">
						<view class="u-flex">
							<image class="pay-img" src="../../../static/imgas/order_wallet_pay.png" mode=""></image>
							<text>余额支付</text>
						</view>
						<radio shape="circle" name="wallet"></radio>
					</view>
				</radio-group>	
				<button class="u-reset-button pay-btn" @tap="settlementBtn()">确认支付</button>
		  </uni-popup>
		</view>
	</view>

	</view>

</template>

<script>
	export default {
		data() {
			return {
				cleaner_rule: '', // 清洁要求
				payType:'',
				info: {},
				order_id: null, // 订单页面传来的订单id
				cleaner_id: null, // 保洁id
				examinePeopleList: [], // 查看人数
				commentsData: [], // 评论数据
				detailsData: {}, // 评论详情数据
				status1: 'more', // 评论加载状态
				page1: 1, // 评论初始页码
				total1: 0, // 评论数据总条数
				uid: '', // 点击评论的当前列id
				imgUrl: `${getApp().globalData.imgScr}jd/dingdankongzhuangtai.png`,
				imgUrl1: `${getApp().globalData.imgScr}jd/xinji.png`,
				imgUrl2: `${getApp().globalData.imgScr}jd/yikaoshi.png`,
				imgUrl3: `${getApp().globalData.imgScr}jd/yipeixun.png`,
				imgUrl4: `${getApp().globalData.imgScr}jd/shimingrenzheng.png`,
				shouchang: `${getApp().globalData.imgScr}jd/shouchang.png`, // 未点赞图片
				shouchangXz: `${getApp().globalData.imgScr}jd/shouchang_xz.png`, // 已点赞图片
				pinglun: `${getApp().globalData.imgScr}jd/pinglun.png`,
				// 联系人信息
				address: {
					a_name: '', // 联系人姓名
					tel: '', // 联系人电话
					road: '', // 联系人地址
					addr_longitude: '', // 联系人经度
					addr_latitude: '', // 联系人纬度
				},
				gender_require: 0,
				people_number: '',
				expect_room_number: '',
				man_number: '',
				woman_number: '',
				unit_price: '',
				wageList:[
					'按小时', '按天'
				],
				age_require: '',
				hourly_wage_type: 1,
				// 订单信息
				type: 1, //类型1-酒店,2-保洁  
				order_info: {
					hotel_name: '', //酒店名称  
					order_num: '', //订单号    
					status: '', //订单状态1-已提交,2-已确认房型数量,3-已支付,4-已评价,5-已取消 
					order_type: 1, //订单类型1长期工2短期工3报名订单
					service_time: '', //服务时间  
					work_time: '', //上班时间    
					create_time: '', //创建时间    
					hotel_confirm_time: '', //酒店确认房型数量时间  
					hotel_pay_time: '', //酒店支付完成时间    
					hotel_evaluate_time: '', //酒店评价时间  
					hotel_cancel_time: '', //酒店取消时间    
					cancel_reason: '', //取消原因    
					cleaning_type: 1, //打扫类型1住房2退房3部不分退住  
					people_number: 0, //需求人数  
					signup_people_number: 0, //已报名人数  
					gender_require: 1, //性别要求1男2女3不限  
					age_require: '', //年龄要求 例:18-25  
					expect_room_number: 0, //预计房量  
					level_require: '', //等级要求  
					subsidy: '', //补贴金额  
					meal_allowance: 1, //是否管饭0不管饭1一餐2两餐3三餐  
					fatigue_dress: 1, //是否提供工作服1提供0不提供  
					stay: 1, //是否提供住宿1提供0不提供  
					is_start: 1, //订单是否开启  
					remarks: '', // 备注

				},
				order_total_money: 0, // 订单金额
				mealAllowanceFilter: {
					0: '包餐',
					1: '餐补',
				},
				orderType: 1,
				fatigueDressFilter: {
					0: '不提供工作服',
					1: '提供工作服'
				},
				stayFilter: {
					0: '不提供住宿',
					1: '提供住宿'
				},
				order_total_money: '', // 订单总额
				// 酒店房型
				room_type: [],
				clean_requirements: [], //清洁要求  
				cleanliness_standard: [], //清洁标准图片    
				service_details_data: [],
				earning: '', //酒店预计支出/保洁预计收入  
				// 订单状态
				orderStatus: {
					1: '已提交',
					2: '已确认房型数量',
					3: '已支付',
					4: '已评价',
					5: '已取消',
				},
				contentText: { // 加载状态对应的提示语
					contentdown: '点击加载更多数据',
					contentrefresh: '正在加载中...',
					contentnomore: '没有更多数据'
				},
				// 打扫类型
				cancelStatus: {
					1: '住房',
					2: '退房',
					3: '不分退住',
				},
				// 要求性别
				genderStatus: {
					0: '不限',
					1: '男',
					2: '女'
				},
				// 等级要求
				levelStatus: {
					'1': '初级',
					'2': '中级',
					'3': '高级',
				},
				ageArray: [
					[16,20, 25, 30, 35, 40, 45, 50],
					[25, 30, 35, 40, 45, 50, 55, '不限']
				],
				data: { // 客服相关信息
					tel: '' // 客服电话
				},
				valiFormData: {
					people_number: '', // 需求人数
					expect_room_number: '', // 预计房量
					unit_price: ''
				},
				rules: {
					people_number: {
						recruits: [{
							required: true,
							errorMessage: '请输入需求人数'
						}]
					},
					expect_room_number: {
						recruits: [{
							required: true,
							errorMessage: '请输入预计房量'
						}]
					},
					unit_price: {
						recruits: [{
							required: true,
							errorMessage: '请输入单价'
						}]
					},
				}
			};
		},
		onShow() {
			this.getOrderInfo()
			this.configData()
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面
			this.order_id = Number(option.order_id) // 接收传来的订单id
			this.orderType = option.type
		},
		methods: {
			/**
			 * 
			 * 获取订单详情列表详情
			 */
			getOrderInfo() {
				let _this = this
				const params = {
					id: _this.order_id,
					type: _this.orderType
				}
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				this.$http.post('/index/Communal/orderinfo', params).
				then(function(res) {
					uni.hideLoading()
					let arr = []
					let arr2 = []
					_this.info = res
					_this.address = res.address
					_this.order_info = res.order_info
					_this.expect_room_number = res.address.floor_room
					_this.unit_price = res.order_info.unit_price
					_this.hourly_wage_type = res.order_info.hourly_wage_type
					_this.room_type = res.room_type
					_this.order_total_money = res.order_total_money
					_this.clean_requirements = res.clean_requirements
					_this.cleanliness_standard = res.cleanliness_standard
					_this.service_details_data = res.service_details_data
					_this.order_total_money = res.order_total_money
					_this.earning = res.earning
				})
			},
			// 清洁要求
			configData() {
				let _this = this
				this.$http.get('/index/Communal/config_data', {
					config_id: 6
				}).
				then(res => {
					_this.cleaner_rule = res.cleaner_rule.value
					console.log('res', res)
				})
			},
			lookImg(url) {
				uni.previewImage({
					urls:[url]
				})
			},
			// 点击手机号的图标
			clickIcon() {
				console.log(123)
			},
			// 点击查看
			clickChakan() {
				let _this = this
				this.$refs.examinePeoplePopup.open()
				const params = {
					order_id: _this.order_id,
					page: 1,
					limit: 10,
					store_longitude: _this.address.addr_longitude + '',
					store_latitude: _this.address.addr_latitude + ''
				}
				this.$http.post('/index/Hotelorder/signup_cleaner_list', params).then(function(res) {
					_this.examinePeopleList = res.data
				})
				// this.$refs.examinePeoplePopup.open()
			},

			// 修改订单
			updataOrder() {
				if(this.order_info.signup_people_number==0){
					uni.navigateTo({
						url: '/hotelAdmin/home/add-order/add-order?order_id=' + this.order_id
					})
				}else{
					uni.showToast({
						title: '有报名人员，请取消人员后修改',
						icon: 'none'
					})
				}
				// this.$refs.updataOrderPopup.open()
				// this.people_number = this.order_info.people_number
				// this.unit_price = this.order_info.unit_price
				// this.age_require = this.order_info.age_require
				// this.expect_room_number = this.order_info.room_number
			},
			/**
			 * 修改订单按钮事件
			 * 
			 */
			save(ref) {
				let number = ''
				if(this.gender_require==1){
					number= this.man_number+','+this.woman_number
				}else{
					number = this.people_number
				}
				const params = {
					order_id: this.order_id,
					gender_require: this.gender_require,
					people_number: number,
					expect_room_number: this.expect_room_number,
					unit_price: this.unit_price,
					hourly_wage_type: this.hourly_wage_type,
				}
				uni.showLoading({
					title: "修改中...",
					mask: true
				})
				this.$http.post('/index/Hotelindex/edit_order', params).then(res => {
					uni.hideLoading()
					this.getOrderInfo()
					setTimeout(() => {
						uni.showToast({
							title: '修改成功!'
						})
					}, 500);
					this.hourly_wage_type = 1
					this.gender_require = 0
					this.man_number = ''
					this.woman_number = ''
					this.people_number = ''
					this.$refs.updataOrderPopup.close()
				}).catch(res => {
					uni.hideLoading()
					uni.showToast({
						title: res.errMsg,
						icon: "none"
					})
				})
				// let _this = this
				// try {
				// 	let res = this.$refs[ref].validate()
				// 	res.order_id = _this.order_id
				// 	res.people_number = _this.valiFormData.people_number
				// 	res.expect_room_number = _this.valiFormData.expect_room_number
				// 	res.unit_price = _this.valiFormData.unit_price
				// 	uni.showLoading({
				// 		title: "修改中...",
				// 		mask: true
				// 	})
				// 	await this.$http.post('/index/Hotelindex/edit_order', res)
				// 	uni.hideLoading()
				// 	this.getOrderInfo()
				// 	setTimeout(() => {
				// 		uni.showToast({
				// 			title: '修改成功!'
				// 		})
				// 	}, 500);

				// 	this.$refs.updataOrderPopup.close()
				// 	_this.valiFormData = {}
				// } catch (err) {
				// 	setTimeout(() => {
				// 		uni.showToast({
				// 			title: err.errMsg,
				// 			icon: "none"
				// 		})
				// 	}, 500);
				// 	uni.hideLoading()
				// }
			},
			// 取消保洁按钮
			cancelOrderCleaner(val) {
				let _this = this
				_this.cleaner_id = val.id
				_this.$refs.inputDialog.open()
			},
			// 确认取消保洁事件
			dialogInputConfirm(val) {
				const params = {
					cleaner_id: this.cleaner_id,
					order_id: this.order_id,
					cancel_reason: val
				}
				this.$http.post('/index/Hotelorder/cancel_order_cleaner', params).then(res => {
					uni.hideLoading()
					setTimeout(() => {
						uni.showToast({
							title: '取消成功！'
						})
					}, 300);
					this.$refs.inputDialog.close()
					this.getOrderInfo()
				}).catch(res => {
					uni.hideLoading()
					setTimeout(() => {
						uni.showToast({
							title: '此订单无法取消',
							icon: "none"
						})
					}, 300);


				})
			},
			yuji(){
				if(this.expect_room_number<this.address.floor_room){
					uni.showToast({
						icon:'none',
						title:'保底房量不得低于'+this.address.floor_room
					})
				}
			},
			zuofang(){
				if(this.unit_price<this.address.unit_price - 0 ){
					uni.showToast({
						icon:'none',
						title:'做房单价不得低于'+this.address.unit_price
					})
				}
				
			},
			// 开始报名
			startOrder() {
				const params = {
					order_id: this.order_id,
				}
				uni.showLoading({
					title: this.order_info.is_start !== 1 ? '开启中...' : '暂停中...',
					mask: true
				})
				this.$http.post('/index/Hotelindex/switch_order', params).then(res => {
					wx.hideLoading()
					// this.getOrderInfo()
					// setTimeout(() => {
					// 	uni.showToast({
					// 		title: this.order_info.is_start !== 1 ? '暂停成功' : '开启成功',
					// 		// duration: 1000
					// 	})
					// }, 300);
					// console.log('1234')
					uni.switchTab({
						url: "/pages/tag/indent/indent"
					});
				}).catch(res => {
					uni.hideLoading()
					setTimeout(() => {
						uni.showToast({
							title: res.errMsg
						})
					}, 300);

				})
			},
			// 查看人数的收藏
			async shouchangClick(data) {
				let _this = this
				uni.showLoading({
					title: !data.collection ? '收藏中...' : '取消收藏中...',
					mask: true
				})
				try {
					let index = this.tabIndex == 0 ? 2 : this.tabIndex
					let res = await this.$http.post('/index/Hotelorder/collection', {
						cleaner_id: data.id,
						cleaner_type: data.cleaner_type
					})
					let rep = await this.$http.get('/index/Hotelcleaner/cleanerinfo', {
						id: data.id
					})
					_this.$set(data, 'collection', !data.collection)
					_this.$set(data, 'collection_num', rep.collection_num)
					// uni.hideLoading()
					setTimeout(() => {
						uni.showToast({
							icon: "none",
							title: data.collection ? '收藏成功' : '取消成功'
						})
					}, 300);

					_this.getOrderInfo()
				} catch (e) {
					uni.hideLoading()
					_this.getOrderInfo()
					setTimeout(() => {
						uni.showToast({
							title: e.errMsg,
							icon: "none"
						})
					}, 300);


				}
			},
			// 查明人数的评价
			async pingjiaClick(val) {
				let _this = this
				this.uid = val.id
				this.$refs.evaluatePopup.open()
				try {
					let res = await this.$http.get('/index/Hotelcleaner/cleanerinfo', {
						id: val.id
					})
					this.detailsData = res
					let rep = await this.$http.get('/index/Hotelcleaner/cleaner_evaluatelist', {
						id: val.id,
						page: 1,
						limit: 10
					})
					this.commentsData = rep.data
					this.status1 = this.page1 >= rep.last_page ? 'no-more' : 'more'

				} catch (e) {
					//TODO handle the exception
					uni.showToast({
						title: e.errMsg,
						icon: "none"
					})
				}
			},
			cutWage(i){
				if(i==0){
					this.unit_price = this.address.time_unit_price
				}else{
					this.unit_price = this.address.day_unit_price
				}
				this.hourly_wage_type = i+1
			},
			changeSex(e){
				if(e.detail.value){
					this.gender_require = 1
				}else{
					this.gender_require = 0
				}
			},
			mapClick() {
				uni.openLocation({
					latitude: this.address.addr_latitude * 1,
					longitude: this.address.addr_longitude * 1,
					name: this.address.road,
					success: function() {
						console.log('success');
					}
				});
			},
			bindAgeChange(e){
				let arr = e.detail.value
				let i = arr[0]
				let j = arr[1]
				let s = this.ageArray[0][i]
				let o = this.ageArray[1][j]
				this.ageArray = [
					[16,20, 25, 30, 35, 40, 45, 50],
					[25, 30, 35, 40, 45, 50, 55, '不限']
				]
				this.age_require = s + '-' + o
			},
			changeByone(e){
				switch (e.detail.column) {
					case 0: //拖动第1列
						switch (e.detail.value) {
							case 0:
								this.ageArray[1] = [25, 30, 35, 40, 45, 50, 55,'不限']
								break
							case 1:
								this.ageArray[1] = [30, 35, 40, 45, 50, 55,'不限']
								break
							case 2:
								this.ageArray[1] = [35, 40, 45, 50, 55,'不限']
								break
							case 3:
								this.ageArray[1] = [40, 45, 50, 55,'不限']
								break
							case 4:
								this.ageArray[1] = [45, 50, 55,'不限']
								break
							case 5:
								this.ageArray[1] = [50, 55,'不限']
								break
							case 6:
								this.ageArray[1] = [55,'不限']
								break
							case 7:
								this.ageArray[1] = ['不限']
								break
						}
						break
				}
				this.$forceUpdate()
			},
			/**
			 * 评论列表加载更多按钮
			 * @param {Object} e 加载更多的状态 
			 */
			async clickLoadMore1(e) {
				if (e.detail.status == 'no-more') return
				this.status1 = 'loading'
				this.page1 += 1
				try {
					let rep = await this.$http.get('/index/Hotelcleaner/cleaner_evaluatelist', {
						id: this.uid,
						page: this.page1,
						limit: 10
					})
					this.commentsData = [...this.commentsData, ...rep.data]
					this.total1 = rep.total
					if (this.page1 >= rep.last_page) return this.status1 = 'no-more'
					this.status1 = 'more'
				} catch (e) {
					uni.showToast({
						title: e.errMsg,
						icon: "none"
					})
				}
			},
			confirmPay(){
				this.$refs.mothodDialog.open();
			},
			/**
			 *
			 * 立即支付
			 * */
			settlementBtn() {
				let _this = this; 
				const params = {
					orderids: _this.order_id,
					payType:_this.payType,
					openid:uni.getStorageSync('hotelData').openid
				};
				if (!_this.payType) {
				
						uni.showToast({
						  title: "请选择支付方式",
						  icon: "none",
						});
					return;
				}
				uni.showLoading({
					title: "结算中...",
					mask: true
				})
				_this.$http
					.post("/index/Hotelorder/pay_order", params)
					.then((res) => {
						uni.hideLoading()
						if(params.payType == 'wallet'){
						_this.$refs.mothodDialog.close();
							_this.getOrderInfo()
							setTimeout(() => {
								uni.showToast({
									title: "支付成功!",
									icon: "none",
								});
							}, 300);
						}else{
							try {
								uni.requestPayment({
								    provider: 'wxpay',
									timeStamp: res.timeStamp,
									nonceStr: res.nonceStr,
									package: res.package,
									signType: res.signType,
									paySign: res.paySign,
									success: function (res) {
										console.log('success:' + JSON.stringify(res));
										_this.getOrderInfo()
										_this.$refs.mothodDialog.close();
										setTimeout(() => {
										  uni.showToast({
											title: "支付成功",
											icon: "none",
										  });
										}, 300);
									},
									fail: function (err) {
										console.log('fail:' + JSON.stringify(err));
										_this.$refs.mothodDialog.close();
										uni.showToast({
											title: '取消支付',
											icon: 'none',
										});
									}
								});
								
							}catch (e) {
									_this.$refs.mothodDialog.close();
								uni.showToast({
									title:e.errMsg,
									icon:"none"
								})
							}
						}
					})
					.catch((res) => {
						uni.hideLoading()
							_this.$refs.mothodDialog.close();
						setTimeout(() => {
							uni.showToast({
								title: res.errMsg,
								icon: "none",
							});
						}, 300);

					});
			},
			openTel: function(tel) {
				let _this = this
				uni.makePhoneCall({
					phoneNumber: tel //仅为示例
				});
			}
		}
	}
</script>

<style lang="scss">
	.uni-card .uni-card__header .uni-card__header-content {
	  justify-content: flex-start!important;

	}
	.u-flex {
	    display: flex;
	    flex-direction: row;
	    align-items: center;
	}
	.u-row-between {
	    justify-content: space-between;
	}
	.pay-box {
			.pay-item {
				height: 90rpx;
				padding: 0 30rpx;
				font-size: 26rpx;
				background: #fff;
				border-bottom: 1rpx solid #eeeeee;
	
				&:last-child {
					border-bottom: none;
				}
	
				.pay-img {
					width: 40rpx;
					height: 40rpx;
					margin-right: 25rpx;
				}
			}
		}
	
		.pay-btn {
			width: 350rpx;
			line-height: 80rpx;
			background: linear-gradient(-90deg, #8dc9f1, #d8eefc);//linear-gradient(90deg, rgba(240, 199, 133, 1), rgba(246, 214, 157, 1));
			border-radius: 40rpx;
			color: rgba(#fff, 0.9);
			margin: 20rpx auto 40rpx;
		}
	
	.BOX {
		width: 100%;
		overflow: hidden;
		padding-bottom: 200rpx;
	}

	.order-top {
		height: 240rpx;
		padding: 20rpx 18rpx;
		background: linear-gradient(-90deg, #8dc9f1, #d8eefc);
		font-family: PingFang-SC-Medium;
		color: #000;
		.order-top-location {
			display: flex;
			justify-content: space-between;
			margin-bottom: 14rpx;
		}
		.order-top-text {
			padding-left: 18rpx;
			font-size: 32rpx;
			font-weight: Medium;

			.quxiao {
				font-size: 40rpx;
			}
		}
	}

	.order-info {
		position: relative;
		align-items: center;
		margin-top: 40rpx;
		padding: 30rpx 18rpx 25rpx 18rpx;
		background-color: #fff;
		border-radius: 15rpx;
		color: #000;
		.location-icon {
			width: 37rpx;
			height: 37rpx;
			margin-right: 20rpx;
			color: #2DE2A9;
		}

		.order-info-relation-top {

			font-size: 30rpx;

			.icons {
				position: absolute;
				right: 15rpx;
				top: 30rpx;
			}
		}

		.order-info-relation-bottom {
			font-size: 30rpx;
			width: 100%;
			margin-top: 20rpx;
			color: #000;
		}

	}

	.order-info2 {
		display: flex;
		justify-content: space-between;
		font-size: 36rpx;

		.order-info-color {
			color: #333;
		}

		.order-info-relation2 {
			font-size: 32rpx;
			color: #33D182;

			.order-info-phone {
				.uni-icons {
					margin-left: 10rpx;
				}
			}


			

		}
	}

	.order-information {
		padding: 0 18rpx;
		padding-top: 64rpx;
		background-color: #fff;

		.uni-card {
			border-radius: 15rpx;
		}

		.order-information-room-info {
			display: flex;
			justify-content: space-around;
			flex-wrap: wrap;

			.order-information-room-info-son {
				box-sizing: border-box;
				width: 30.3%;
				height: 130rpx;
				text-align: center;
				background-color: #F6F8FF;
				border-radius: 5rpx;
				justify-content: center;
				align-items: center;
				padding-top: 22rpx;
				margin-bottom: 20rpx;

				.order-information-room-info-son-t {
					color: #FF4B4B;
					font-size: 28rpx;
					font-weight: 700;
				}

				.order-information-room-info-son-t text:first-child {
					font-size: 40rpx;
				}

				.order-information-room-info-son-b {
					display: flex;
					justify-content: center;
					color: #000;
					font-size: 24rpx;
					margin-top: 10rpx;
				}

				.order-information-room-info-son-b2 {
					font-weight: 400;
					color: #000;
				}

			}
		}

		.order-information-price {
			margin-top: 2rpx;
			text-align: center;
			font-weight: Medium;
			color: #333333;

			.order-information-price-top {
				font-weight: 700;
				font-size: 28rpx;
			}

			.order-information-price-bottom {
				opacity: .7;
				font-size: 26rpx;
			}

		}

		.fengexian {
			width: 100%;
			height: 2rpx;
			background-color: #EDEDED;
			margin-top: 20rpx;
		}

		.order-xuqiu {
			margin-top: 26rpx;
			box-sizing: border-box;
			padding-bottom: 20rpx;
			// padding: 28rpx;
		}
	}

	.demo-uni-row {
		margin-bottom: 10px;

	}

	/deep/ .uni-row {
		margin-bottom: 0px;
	}

	.demo-uni-col {
		height: 36px;
		font-family: PingFang-SC-Medium;
		color: #757575;

		.demo-uni-col2 {
			font-weight: 600;
			color: #333;
		}

		.chakan {
			color: #47DD89;
			font-size: 26rpx;
			margin-left: 30rpx;
		}
	}

	.order-welfare view:last-child {
		// margin-bottom: 30rpx;
	}

	.order-welfare {

		padding: 0 18rpx;
		margin-top: 20rpx;
		color: #4A4A4A;
		font-family: PingFang-SC-Medium;
		font-size: 36rpx;

		&-son {
			margin-bottom: 30rpx;
		}

		.order-welfare-bottom {
			margin: 35rpx 0;
		}

		.uni-card {
			border-radius: 15rpx;
		}

		.lv {
			color: #333333;
			font-weight: bold;
		}

		.lv2 {
			margin-right: 15rpx;
		}

		.lv3 {
			font-size: 26rpx;
			opacity: .7;
		}

		.order-welfare-fuwu {
			display: flex;
			justify-content: space-between;
			margin-bottom: 30rpx;
			// font-size: 36rpx;
		}
	}

	.order-big-img {
		width: 100%;
		margin: 20rpx 0;
		overflow: hidden;
		text-align: center;
		border-radius: 15rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.order-btn {
		margin: 30rpx 0;
		padding: 18rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 126rpx;
		background-color: #fff;

		button {
			width: 316rpx;
			height: 96rpx;
			border-radius: 96rpx;
			line-height: 96rpx;
			border: 0;
			background: linear-gradient(-90deg, #8dc9f1, #d8eefc);
			color: #FFFFFF;
			font-size: 36rpx;
		}

		button::after {
			display: none;
		}

		.button1 {
			background: linear-gradient(-90deg, #fc6a6e, #ff9050);
		}

		.daijiesuanPrice {
			margin-right: 100rpx;
			margin-left: 30rpx;

			&-total {
				font-size: 30rpx;
				color: #000;
			}

			&-price {
				font-weight: bold;
				font-size: 32rpx;
				color: #FF4B4B;
			}
		}
	}

	.order-btn-fixed {
		padding: 0;
		width: 100%;
		position: fixed;
		bottom: 0;
		height: 170rpx;
		margin: 0;
	}

	.updataOrderPopup {
		.Popup {
			border-radius: 15rpx;
			border-radius: 20rpx 20rpx 0 0;
			overflow: auto;
		}

		.uni-card {
			border-radius: 15rpx;
		}

		.uni-card .uni-card__header {
			border-bottom: 0;
			margin-bottom: 0rpx;
		}

		text-align: center;
		width: 100%;

		.uni-card__header {
			text-align: center;
		}

		.uni-forms-item__inner {
			padding-bottom: 0px;
		}
	}

	.uni-popup {
		border-radius: 20rpx;
	}

	.order-btn2 {
		margin-top: 0rpx;
		padding: 0rpx;
	}

	.examinePeoplePopup {
		width: 100%;
		.uni-popup__wrapper{
			width: 100%;
		}
		.ex-popup {
			max-height: 80vh;
			overflow: auto;
		}

		// 小图片和描述信息的对齐方式
		.dis-corder {
			display: flex;
			align-items: center;

		}

		&-zanwu {
			width: 400rpx;
			height: 100rpx;
			margin-top: 30rpx;
			text-align: center;
			font-weight: bold;
			color: #7F7F7F;
			font-size: 32rpx;
		}

		.uni-card {
			border-radius: 15rpx;
		}

		.examinePeoplePopup-row {
			display: flex;
			margin-bottom: 30rpx;
			border-bottom: 2rpx solid #EDEDED;

			image {
				width: 170rpx;
				height: 170rpx;
				border-radius: 15rpx;
			}
		}

		.dis-corder {
			display: flex;
			align-items: center;

			&-pj {
				font-size: 22rpx;
				font-weight: bold;
				color: #7F7F7F;
				line-height: 30rpx;
				border: 2rpx solid #8D8D8D;
				border-radius: 8rpx;
				margin-right: 10rpx;
				padding: 0 10rpx;
			}
		}

		.examinePeoplePopup-row1,
		.examinePeoplePopup-row2,
		.examinePeoplePopup-row3 {
			margin-left: 30rpx;
			display: flex;
			margin-bottom: 20rpx;

			.popupBtn {
				height: 60rpx;
				// background-color: #47DD89;
				background: linear-gradient(to right, #8dc9f1,#d8eefc);
				line-height: 60rpx;
				font-size: 30rpx;
				width: 160rpx;
				color: #fff;
				text-align: center;
				border-radius: 40rpx;
			}

			button::after {
				display: none;
			}

		}

		.examinePeoplePopup-row2,
		.examinePeoplePopup-row3 {
			font-size: 30rpx;
		}

		.examinePeoplePopup-row1,
		.examinePeoplePopup-row3 {
			justify-content: space-between;

			&-name {
				font-size: 36rpx;
			}

			&-juli {
				font-size: 32rpx;
			}
		}

		.examinePeoplePopup-row2 .examinePeoplePopup-row2-img image {
			margin-right: 10rpx;
			width: 36rpx;
			height: 36rpx;
		}

		.examinePeoplePopup-row3 image {
			width: 36rpx;
			height: 36rpx;
			margin-right: 15rpx;
			// margin-left: 30rpx;

		}

		.examinePeoplePopup-row2 .examinePeoplePopup-row2-fuwu {
			margin-left: 30rpx;
		}
	}

	// 小图片和描述信息的对齐方式
	.dis-corder {
		display: flex;
		align-items: center;

		&-pj {
			font-size: 36rpx;
			font-weight: bold;
			color: #7F7F7F;
			line-height: 30rpx;
			border: 2rpx solid #8D8D8D;
			border-radius: 8rpx;
			margin-right: 10rpx;
			padding: 0 10rpx;
		}
	}

	// 弹出层样式
	.popup {
		width: 100%;
		height: 80vh;
		border-radius: 20rpx 20rpx 0 0;
		overflow: auto;
		background-color: #F5F5F5;

		.img-14 {
			width: 36rpx;
			height: 36rpx;
			margin: 10rpx;
		}

		.uni-card {
			border-radius: 20rpx;
		}

		// 保洁详情信息 卡片
		.info-card {
			.card-list {
				display: flex;
				flex-direction: column;

				.c-l-top {
					display: flex;
					align-items: center;

					.c-l-t-img {
						width: 130rpx;
						height: 130rpx;
						border-radius: 20rpx;
						overflow: hidden;
						border: 0;
						margin-right: 20rpx;
					}

					.c-l-t-con {
						flex: 1;
						display: flex;
						flex-direction: column;
						height: 130rpx;

						.c-l-t-title {
							display: flex;
							justify-content: space-between;
							align-items: center;

							.c-l-t-name {
								font-size: 32rpx;
								font-weight: bold;
								color: #000000;
							}

							.c-l-t-info {
								.c-l-t-ioc {
									width: 28rpx;
									height: 28rpx;
									margin-right: 6rpx;
								}

								.c-l-t-text {
									font-size: 28rpx;
									font-weight: 500;
									color: #FEAD1D;
								}
							}
						}
					}

					.c-l-e-text {
						font-size: 20rpx;
						font-weight: 500;
						line-height: 1.2em;
						color: rgba($color: #000000, $alpha: 0.5);
					}
				}

				.c-l-end {
					display: flex;
					align-items: center;
					margin-top: 20rpx;

					.c-l-e-kp {
						flex: 1;
						display: flex;
						justify-content: center;
						align-items: center;

						.c-l-e-text {
							font-size: 24rpx;
							font-weight: 500;
							color: rgba($color: #000000, $alpha: 0.5);
							margin-left: 6rpx;
						}
					}
				}
			}
		}

		// 酒店评价信息列表
		.list-card {
			.uni-list-item__container {
				padding: 20rpx 0;
			}

			.l-c {
				border-bottom: 2rpx solid #EDEDED;
			}

			// 标题栏
			.l-c-top {
				display: flex;
				align-items: center;
				margin-bottom: 40rpx;

				.l-c-img {
					width: 60rpx;
					height: 60rpx;
					margin-right: 20rpx;
					border-radius: 30rpx;
					overflow: hidden;
				}

				.l-c-title {
					flex: 1;
					height: 60rpx;

					.l-c-name {
						display: flex;
						align-items: center;
						width: 100%;
						justify-content: space-between;
						margin-bottom: 10rpx;

						.l-c-text {
							font-size: 26rpx;
							font-weight: bold;
							color: #000000;
							width: 360rpx;
							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;
						}

						.l-c-date {
							width: 225rpx;
							font-size: 24rpx;
							font-weight: 500;
							color: rgba($color: #000000, $alpha: 0.5);
						}
					}

					.l-c-iocn {
						display: flex;
						align-items: center;
						width: 100%;

						.l-c-i-img {
							width: 24rpx;
							height: 24rpx;
							margin-right: 10rpx;
						}
					}
				}
			}

			// 内容栏
			.l-c-con {
				display: flex;
				margin-bottom: 25rpx;
				margin-left: 10rpx;

				.l-c-c-text {
					font-size: 24rpx;
					font-weight: 500;
					line-height: 1.2em;
					color: rgba($color: #000000, $alpha: 0.7);
				}
			}

			// 底部标签栏
			.l-c-end {
				margin: 10rpx;
				display: flex;

				/deep/.uni-tag {
					color: #000;
					opacity: .7;
					border: 0;
					border-radius: 5rpx;
					font-family: -webkit-body;
					background-color: #f7f7f7;
					margin: 0rpx 20rpx 20rpx 0;
					border-radius: 5rpx !important;
				}
			}
		}
	}
	.ellipsis1{
		overflow: hidden;
		white-space: nowrap; /* 防止文字换行 */
		text-overflow: ellipsis;
	}
	.order-info-map {
		width: 100rpx;
		color: #fff;
		font-size: 24rpx;
		text-align: center;
		image{
			width: 30rpx;
			height: 30rpx;
			margin-bottom: 20rpx;
		}
	}
	.img{
		width: 92rpx;
		height: 92rpx;
		border-radius: 50%;
		margin-right: 24rpx;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.from-item{
		height: 100rpx;
		line-height: 100rpx;
		font-size: 32rpx;
		color: #2E2E2E;
		border-bottom: 2rpx solid #C8C8C8;
		display: flex;
		justify-content: space-between;
		.from-title{
			width: 5em;
		}
		.from-small{
			flex: 1;
			text-align: right;
			align-items: center;
			input{
				height: 100%;
			}
			.from-small-left{
				width: 270rpx;
				text-align: left;
				font-size: 26rpx;
				color: #676767;
			}
		}
	}
	.isflex{
		display: flex;
		justify-content: space-between;
		align-items: center;
		input{
			height: 100%;
		}
	}
	.wage-item{
		width: 132rpx;
		height: 64rpx;
		text-align: center;
		line-height: 64rpx;
		font-size: 26rpx;
		color: #202020;
		border-radius: 6rpx;
		background-color: #E9E9E9;
	}
	.active{
		background-color: #D8EEFC;
		color: #fff;
	}
</style>
